<template>
	<view>
		<block v-if="mode == 'textTab'">
			<view class="swicth-row" :style="{color:textColor}">
				<view :class="{'is-active':selectValue == item.value}" :style="{'--activeColor':activeColor,'font-size':textSize}" v-for="item in swicthData" :key="item.value" @tap="clickTab(item)">{{item.label}}</view>
			</view>
		</block>
		<block v-else>
			<view class="swicth-row2" :style="{color:textColor}">
				<view :class="{'is-active':selectValue == item.value}" :style="{'--activeColor':activeColor,'font-size':textSize}" v-for="item in swicthData" :key="item.value" @tap="clickTab(item)">{{item.label}}</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		props:{
			// 字体大小
			textSize:{
				type:String,
				default:"24upx"
			},
			// 字体颜色
			textColor:{
				type:String,
				default:"#333"
			},
			// 选择字体的颜色
			activeColor:{
				type:String,
				default:"#00ACFE"
			},
			// 选项
			/*
			{
				label:"选项"，
				value:"1"
			}*/
			swicthData:{
				type:Array,
				default:()=>[]
			},
			//绑定选项值 value
			selectValue:{
				type:[String, Number]
			},
			mode:{
				type:String,
				default:"textTab",// textTab 字， btnTab 按钮
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			clickTab(item) {
				//点击事件
				this.$emit("clickTap",item)
			}
		}
	}
</script>

<style scoped lang="scss">
.swicth-row {
	display: flex;
	align-items: center;
	margin: 20upx 0;
	justify-content: space-between;
	
	view {
		flex: 0 0 auto;
		font-size: 35upx;
		padding: 10upx;
		position: relative;
		font-weight: bold;
		width: 200rpx;
		text-align: center;
	}
	
	.is-active {
		color: #00ACFE;
		&::after {
			content: " ";
			background-color: #00ACFE;
			border-radius: 5upx;
			width: 50%;
			margin: 0 25%;
			height: 5upx;
			display: block;
			position: absolute;
			bottom: -15upx;
			left: 0;
		}
	}
}

.swicth-row2 {
	display: flex;
	align-items: center;
	margin: 20upx 0;
	justify-content: space-around;
	
	view {
		flex: 0 0 auto;
		position: relative;
		font-weight: bold;
		background: #FFFFFF;
		border: 1px solid #DCDFE6;
		border-radius: 10rpx;
		font-size: 26rpx !important;
		padding: 10rpx 0;
		color: #C0C4CC;
		width: 22%;
		text-align: center;
	}
	
	.is-active {
		color: #00ACFE;
		background: #D6F1FF;
		border: 1px solid #D6F1FF;
	}
}
</style>
